<template>
  <div class="plane-war-game">
    <div class="game-container">
      <div class="game-header">
        <h3>🚀 飞机大战</h3>
        <button @click="exitGame" class="close-button">X</button>
      </div>
      
      <!-- 游戏菜单 -->
      <div v-if="gameState === 'menu'" class="menu-screen">
        <div class="menu-content">
          <h1>🚀 飞机大战</h1>
          <div class="menu-stats">
            <p>最高得分: {{ highScore }}</p>
          </div>
          <div class="menu-controls">
            <button @click="startGame" class="start-button">开始游戏</button>
            <button @click="showInstructionsPanel" class="instructions-button">游戏说明</button>
          </div>
          <div v-if="isShowInstructions" class="instructions">
            <h3>游戏说明</h3>
            <ul>
              <li>使用方向键或WASD控制飞机移动</li>
              <li>按空格键发射子弹</li>
              <li>击败敌机获得分数</li>
              <li>收集道具增加生命值</li>
              <li>躲避敌机和子弹</li>
            </ul>
            <button @click="hideInstructions" class="back-button">返回</button>
          </div>
        </div>
      </div>
      
      <!-- 操作提示 -->
      <div v-if="showControls" class="controls-overlay">
        <div class="controls-content">
          <h2>操作提示</h2>
          <div class="controls-instructions">
            <p>使用 <kbd>方向键</kbd> 或 <kbd>WASD</kbd> 控制飞机移动</p>
            <p>按 <kbd>空格键</kbd> 发射子弹</p>
            <p>按 <kbd>P</kbd> 暂停游戏</p>
          </div>
          <div class="controls-timer">
            <p>游戏将在 <span class="timer">3</span> 秒后开始</p>
          </div>
        </div>
      </div>
      
      <!-- 游戏进行中 -->
      <div v-else-if="gameState === 'playing' || gameState === 'paused'" class="game-screen">
        <!-- 游戏区域 -->
        <div class="game-area" ref="gameArea" tabindex="0" @keydown="handleKeyDown" @keyup="handleKeyUp">
          <!-- 星空背景 -->
          <div class="star" v-for="star in stars" :key="star.id" 
               :style="{left: star.x + 'px', top: star.y + 'px', width: star.size + 'px', height: star.size + 'px'}"></div>
          <!-- 玩家飞机 -->
          <div 
            class="player" 
            :class="{ invincible: player.invincible }"
            :style="{
              left: player.x + 'px',
              top: player.y + 'px',
              transition: player.invincible ? 'all 0.1s' : 'none'
            }"
          >
            <div class="player-body"></div>
            <div class="player-wing left-wing"></div>
            <div class="player-wing right-wing"></div>
            <div class="player-cockpit"></div>
          </div>
          
          <!-- 敌机 -->
          <div 
            v-for="enemy in enemies" 
            :key="enemy.id"
            class="enemy"
            :class="enemy.type"
            :style="{
              left: enemy.x + 'px',
              top: enemy.y + 'px'
            }"
          >
            <div v-if="enemy.type === 'boss'" class="boss-body">
              <div class="boss-eye left-eye"></div>
              <div class="boss-eye right-eye"></div>
              <div class="boss-cannon"></div>
            </div>
            <div v-else class="enemy-body">
              <div class="enemy-wing"></div>
            </div>
            <div class="bullet-effect"></div>
            <div class="bullet-effect"></div>
          </div>
          
          <!-- 子弹 -->
          <div 
            v-for="bullet in bullets" 
            :key="bullet.id"
            class="bullet"
            :class="{ enemy: bullet.isEnemy }"
            :style="{
              left: bullet.x + 'px',
              top: bullet.y + 'px'
            }"
          ></div>
          
          <!-- 道具 -->
          <div 
            v-for="powerup in powerups" 
            :key="powerup.id"
            class="powerup"
            :style="{
              left: powerup.x + 'px',
              top: powerup.y + 'px'
            }"
          >
            ⭐
            <div class="powerup-body">
              <div class="powerup-glow"></div>
            <div class="explosion-particle" v-for="i in 8" :key="i" :style="{transform: 'rotate(' + (i * 45) + 'deg)'}"></div>
          </div>
        </div>
          
          <!-- 爆炸效果 -->
          <div 
            v-for="explosion in explosions" 
            :key="explosion.id"
            class="explosion"
            :style="{
              left: explosion.x + 'px',
              top: explosion.y + 'px',
              width: explosion.size + 'px',
              height: explosion.size + 'px',
              opacity: explosion.opacity
            }"
          ></div>
        </div>
        
        <!-- 游戏信息 -->
        <div class="game-info">
          <div class="info-item">
            <span>得分: {{ score }}</span>
          </div>
          <div class="info-item">
            <span>生命: </span>
            <span v-for="n in player.lives" :key="n" class="life">❤️</span>
          </div>
          <div class="info-item">
            <span>等级: {{ level }}</span>
          </div>
          <div v-if="boss" class="info-item boss-health">
            <span>Boss血量: </span>
            <div class="health-bar">
              <div class="health-fill" :style="{ width: (boss.health! / boss.maxHealth! * 100) + '%' }"></div>
            </div>
          </div>
        </div>
        
        <!-- 暂停界面 -->
        <div v-if="gameState === 'paused'" class="pause-overlay">
          <div class="pause-content">
            <h2>游戏暂停</h2>
            <button @click="resumeGame">继续游戏</button>
          </div>
        </div>
      </div>
      
      <!-- 游戏结束 -->
      <div v-else-if="gameState === 'gameOver'" class="game-over-screen">
        <div class="game-over-content">
          <h1>游戏结束</h1>
          <p>最终得分: {{ score }}</p>
          <p v-if="score > highScore" class="new-record">新纪录!</p>
          <div class="game-over-buttons">
            <button @click="restartGame">重新开始</button>
            <button @click="backToMenu">返回菜单</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed, nextTick } from 'vue'

// 游戏状态
type GameState = 'menu' | 'playing' | 'paused' | 'gameOver'

// 游戏对象接口
interface GameObject {
  id: number
  x: number
  y: number
  width?: number
  height?: number
}

interface Star extends GameObject {
  size: number
}

interface Player extends GameObject {
  lives: number
  invincible: boolean
  speed: number
}

interface Enemy extends GameObject {
  type: 'normal' | 'boss'
  speedY: number
  speedX: number
  health?: number
  maxHealth?: number
}

interface Bullet extends GameObject {
  isEnemy: boolean
  speedY: number
}

interface PowerUp extends GameObject {
  speedY: number
}

interface Explosion extends GameObject {
  size: number
  opacity: number
}

// 游戏常量
const GAME_WIDTH = 480
const GAME_HEIGHT = 700
const PLAYER_SPEED = 5
const BULLET_SPEED = 10
const ENEMY_BULLET_SPEED = 5

// 游戏状态
const gameState = ref<GameState>('menu')
const isShowInstructions = ref(false)
const showControls = ref(false)
const highScore = ref(0)
const gameArea = ref<HTMLElement | null>(null)

// 游戏对象
const player = reactive<Player>({
  id: 1,
  x: GAME_WIDTH / 2,
  y: GAME_HEIGHT - 50,
  lives: 3,
  invincible: false,
  speed: PLAYER_SPEED
})

const enemies = ref<Enemy[]>([])
const bullets = ref<Bullet[]>([])
const powerups = ref<PowerUp[]>([])
const explosions = ref<Explosion[]>([])
const stars = ref<Star[]>([])

// 游戏数据
const score = ref(0)
const level = ref(1)
const boss = ref<Enemy | null>(null)
const bossAppeared = ref(false)

// 控制键状态
const keysPressed = reactive({
  ArrowUp: false,
  ArrowDown: false,
  ArrowLeft: false,
  ArrowRight: false,
  KeyW: false,
  KeyS: false,
  KeyA: false,
  KeyD: false,
  Space: false
})

// 游戏定时器
let gameLoopId: number | null = null
let enemySpawnId: number | null = null
let bossShootId: number | null = null
let startGameTimer: number | null = null

// 计算属性
const canShoot = computed(() => gameState.value === 'playing')

// 辅助函数：聚焦游戏区域
const focusGameArea = () => {
  // 使用nextTick确保DOM更新完成后再获取焦点
  nextTick(() => {
    if (gameArea.value) {
      gameArea.value.focus()
      console.log('游戏区域已获取焦点')
    } else {
      console.log('无法获取游戏区域引用')
    }
  })
}

// 方法
// 创建星空背景
const createStars = () => {
  stars.value = []
  for (let i = 0; i < 100; i++) {
    stars.value.push({
      id: i,
      x: Math.random() * GAME_WIDTH,
      y: Math.random() * GAME_HEIGHT,
      size: Math.random() * 3 + 1
    })
  }
}

const startGame = () => {
  // 创建星空背景
  createStars()
  
  // 显示操作提示
  showControls.value = true
  
  // 清除可能存在的定时器
  if (startGameTimer) {
    clearTimeout(startGameTimer)
  }
  
  // 3秒后开始游戏
  startGameTimer = window.setTimeout(() => {
    showControls.value = false
    // 重置游戏状态
    gameState.value = 'playing'
    score.value = 0
    level.value = 1
    player.lives = 3
    player.x = GAME_WIDTH / 2
    player.y = GAME_HEIGHT - 50
    player.invincible = false
    enemies.value = []
    bullets.value = []
    powerups.value = []
    explosions.value = []
    boss.value = null
    bossAppeared.value = false
    
    // 开始游戏循环
    startGameLoop()
    
    // 开始生成敌机
    startEnemySpawning()
    
    // 确保游戏区域获取焦点
    focusGameArea()
  }, 3000)
}

const backToMenu = () => {
  gameState.value = 'menu'
  stopGameLoop()
  showControls.value = false
  if (startGameTimer) {
    clearTimeout(startGameTimer)
    startGameTimer = null
  }
}

const exitGame = () => {
  stopGameLoop()
  showControls.value = false
  if (startGameTimer) {
    clearTimeout(startGameTimer)
    startGameTimer = null
  }
  // 通知父组件关闭游戏
  emit('close')
}

const showInstructionsPanel = () => {
  isShowInstructions.value = true
}

const hideInstructions = () => {
  isShowInstructions.value = false
}

const pauseGame = () => {
  if (gameState.value === 'playing') {
    gameState.value = 'paused'
    stopGameLoop()
  }
}

const resumeGame = () => {
  if (gameState.value === 'paused') {
    gameState.value = 'playing'
    startGameLoop()
    // 恢复游戏时重新获取焦点
    focusGameArea()
  }
}

const restartGame = () => {
  stopGameLoop()
  startGame()
}

const gameOver = () => {
  gameState.value = 'gameOver'
  stopGameLoop()
  
  // 更新最高分
  if (score.value > highScore.value) {
    highScore.value = score.value
  }
}

// 游戏循环
const startGameLoop = () => {
  stopGameLoop()
  gameLoopId = window.requestAnimationFrame(gameLoop)
}

const stopGameLoop = () => {
  if (gameLoopId) {
    window.cancelAnimationFrame(gameLoopId)
    gameLoopId = null
  }
  
  if (enemySpawnId) {
    clearInterval(enemySpawnId)
    enemySpawnId = null
  }
  
  if (bossShootId) {
    clearInterval(bossShootId)
    bossShootId = null
  }
}

const gameLoop = () => {
  if (gameState.value !== 'playing') return
  
  updatePlayer()
  updateEnemies()
  updateBullets()
  updatePowerUps()
  updateExplosions()
  checkCollisions()
  spawnBossIfNeeded()
  
  gameLoopId = window.requestAnimationFrame(gameLoop)
}

// 更新玩家
const updatePlayer = () => {
  if (keysPressed.ArrowUp || keysPressed.KeyW) {
    player.y = Math.max(0, player.y - player.speed)
  }
  if (keysPressed.ArrowDown || keysPressed.KeyS) {
    player.y = Math.min(GAME_HEIGHT - 40, player.y + player.speed)
  }
  if (keysPressed.ArrowLeft || keysPressed.KeyA) {
    player.x = Math.max(0, player.x - player.speed)
  }
  if (keysPressed.ArrowRight || keysPressed.KeyD) {
    player.x = Math.min(GAME_WIDTH - 50, player.x + player.speed)
  }
  
  // 发射子弹
  if (keysPressed.Space) {
    shoot()
    // 不再在这里重置Space键状态，而是在keyup事件中处理
  }
}

// 玩家射击
let lastShotTime = 0
const shoot = () => {
  if (!canShoot.value) return
  
  const now = Date.now()
  if (now - lastShotTime > 250) { // 射击间隔250ms
    bullets.value.push({
      id: Date.now(),
      x: player.x + 25,
      y: player.y,
      isEnemy: false,
      speedY: -BULLET_SPEED
    })
    lastShotTime = now
  }
}

// 更新敌机
const updateEnemies = () => {
  enemies.value.forEach(enemy => {
    enemy.y += enemy.speedY
    enemy.x += enemy.speedX
    
    // 如果是Boss，让它左右移动
    if (enemy.type === 'boss' && enemy.width) {
      if (enemy.x <= 0 || enemy.x >= GAME_WIDTH - enemy.width) {
        enemy.speedX *= -1
      }
    }
    
    // 如果敌机移出屏幕，重新生成
    if (enemy.y > GAME_HEIGHT + 50 || enemy.y < -50) {
      resetEnemy(enemy)
    }
  })
}

// 重置敌机位置
const resetEnemy = (enemy: Enemy) => {
  enemy.x = Math.random() * (GAME_WIDTH - 45)
  enemy.y = Math.random() * -100 - 40
  enemy.speedY = Math.random() * 7 + 1
  enemy.speedX = Math.random() * 6 - 3
}

// 更新子弹
const updateBullets = () => {
  // 更新子弹位置
  bullets.value.forEach(bullet => {
    bullet.y += bullet.speedY
  })
  
  // 移除超出屏幕的子弹
  bullets.value = bullets.value.filter(bullet => 
    bullet.y > -20 && bullet.y < GAME_HEIGHT + 20
  )
}

// 更新道具
const updatePowerUps = () => {
  powerups.value.forEach(powerup => {
    powerup.y += powerup.speedY
  })
  
  // 移除超出屏幕的道具
  powerups.value = powerups.value.filter(powerup => 
    powerup.y < GAME_HEIGHT + 20
  )
}

// 更新爆炸效果
const updateExplosions = () => {
  explosions.value.forEach(explosion => {
    explosion.opacity -= 0.02
  })
  
  // 移除透明度为0的爆炸效果
  explosions.value = explosions.value.filter(explosion => 
    explosion.opacity > 0
  )
}

// 生成敌机
const startEnemySpawning = () => {
  enemySpawnId = window.setInterval(() => {
    if (gameState.value !== 'playing') return
    
    // 生成普通敌机
    if (enemies.value.length < 8 + level.value) {
      const enemy: Enemy = {
        id: Date.now(),
        x: Math.random() * (GAME_WIDTH - 45),
        y: Math.random() * -100 - 40,
        type: 'normal',
        speedY: Math.random() * 7 + 1,
        speedX: Math.random() * 6 - 3
      }
      enemies.value.push(enemy)
    }
  }, 1000)
}

// 检查碰撞
const checkCollisions = () => {
  // 子弹击中敌机
  bullets.value.forEach(bullet => {
    if (bullet.isEnemy) return // 敌机子弹不击中敌机
    
    enemies.value.forEach(enemy => {
      if (isColliding(bullet, enemy)) {
        // 创建爆炸效果
        createExplosion(enemy.x + (enemy.type === 'boss' ? 50 : 22), enemy.y + (enemy.type === 'boss' ? 40 : 17), enemy.type === 'boss' ? 50 : 30)
        
        // 移除子弹
        bullets.value = bullets.value.filter(b => b.id !== bullet.id)
        
        if (enemy.type === 'boss') {
          // Boss掉血
          enemy.health!--
          score.value += 10
          
          if (enemy.health! <= 0) {
            // Boss被击败
            score.value += 100
            enemies.value = enemies.value.filter(e => e.id !== enemy.id)
            boss.value = null
            
            // Boss被击败后生成道具
            createPowerUp(enemy.x + 50, enemy.y + 40)
            
            // Boss被击败后重新生成普通敌机
            for (let i = 0; i < 5; i++) {
              createEnemy()
            }
          }
        } else {
          // 普通敌机被击败
          score.value += 10
          enemies.value = enemies.value.filter(e => e.id !== enemy.id)
          
          // 生成道具
          if (Math.random() < 0.3) { // 30%概率生成道具
            createPowerUp(enemy.x + 22, enemy.y + 17)
          }
          
          // 生成新敌机
          createEnemy()
        }
      }
    })
  })
  
  // 敌机子弹击中玩家
  bullets.value.forEach(bullet => {
    if (!bullet.isEnemy) return // 玩家子弹不击中玩家
    
    if (isColliding(bullet, player) && !player.invincible) {
      // 创建爆炸效果
      createExplosion(player.x + 25, player.y + 20, 50)
      
      // 移除子弹
      bullets.value = bullets.value.filter(b => b.id !== bullet.id)
      
      // 玩家掉血
      player.lives--
      
      if (player.lives <= 0) {
        gameOver()
      } else {
        // 玩家无敌时间
        player.invincible = true
        setTimeout(() => {
          player.invincible = false
        }, 3000)
      }
    }
  })
  
  // 玩家撞到敌机
  if (!player.invincible) {
    enemies.value.forEach(enemy => {
      if (isColliding(player, enemy)) {
        // 创建爆炸效果
        createExplosion(player.x + 25, player.y + 20, 50)
        
        // 移除敌机
        enemies.value = enemies.value.filter(e => e.id !== enemy.id)
        
        // 生成新敌机来替代被撞的
        createEnemy()
        
        // 玩家掉血
        player.lives--
        
        if (player.lives <= 0) {
          gameOver()
        } else {
          // 玩家无敌时间
          player.invincible = true
          setTimeout(() => {
            player.invincible = false
          }, 3000)
        }
      }
    })
  }
  
  // 玩家获得道具
  powerups.value.forEach(powerup => {
    if (isColliding(player, powerup)) {
      // 增加生命值（最多5条生命）
      player.lives = Math.min(player.lives + 1, 5)
      
      // 移除道具
      powerups.value = powerups.value.filter(p => p.id !== powerup.id)
    }
  })
}

// 碰撞检测
const isColliding = (obj1: GameObject, obj2: GameObject) => {
  const rect1 = { x: obj1.x, y: obj1.y, width: 25, height: 25 }
  const rect2 = { x: obj2.x, y: obj2.y, width: obj2.width || 45, height: obj2.height || 35 }
  
  return rect1.x < rect2.x + rect2.width &&
         rect1.x + rect1.width > rect2.x &&
         rect1.y < rect2.y + rect2.height &&
         rect1.y + rect1.height > rect2.y
}

// 创建爆炸效果
const createExplosion = (x: number, y: number, size: number) => {
  explosions.value.push({
    id: Date.now(),
    x: x - size / 2,
    y: y - size / 2,
    size: size,
    opacity: 1
  })
}

// 创建敌机
const createEnemy = () => {
  const enemy: Enemy = {
    id: Date.now(),
    x: Math.random() * (GAME_WIDTH - 45),
    y: Math.random() * -100 - 40,
    type: 'normal',
    speedY: Math.random() * 7 + 1,
    speedX: Math.random() * 6 - 3
  }
  enemies.value.push(enemy)
}

// 创建道具
const createPowerUp = (x: number, y: number) => {
  powerups.value.push({
    id: Date.now(),
    x: x,
    y: y,
    speedY: 2
  })
}

// 检查是否需要生成Boss
const spawnBossIfNeeded = () => {
  if (score.value >= 500 && !bossAppeared.value) {
    createBoss()
  }
  
  // 升级机制
  if (score.value >= level.value * 500) {
    level.value++
    // 增加更多敌机
    for (let i = 0; i < 3; i++) {
      createEnemy()
    }
  }
}

// 创建Boss
const createBoss = () => {
  if (bossAppeared.value) return
  
  const bossEnemy: Enemy = {
    id: Date.now(),
    x: GAME_WIDTH / 2 - 50,
    y: -80,
    type: 'boss',
    speedY: 1,
    speedX: 2,
    health: 20,
    maxHealth: 20,
    width: 100,
    height: 80
  }
  
  enemies.value.push(bossEnemy)
  boss.value = bossEnemy
  bossAppeared.value = true
  
  // Boss射击
  bossShootId = window.setInterval(() => {
    if (gameState.value !== 'playing' || !boss.value) return
    
    bullets.value.push({
      id: Date.now(),
      x: boss.value.x + 50,
      y: boss.value.y + 80,
      isEnemy: true,
      speedY: ENEMY_BULLET_SPEED
    })
  }, 1000)
}

// 键盘事件处理
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.code in keysPressed) {
    keysPressed[e.code as keyof typeof keysPressed] = true
  }
  
  // 暂停/继续游戏
  if (e.code === 'KeyP') {
    if (gameState.value === 'playing') {
      pauseGame()
    } else if (gameState.value === 'paused') {
      resumeGame()
    }
  }
  
  // 防止空格键滚动页面
  if (e.code === 'Space') {
    e.preventDefault()
  }
}

const handleKeyUp = (e: KeyboardEvent) => {
  if (e.code in keysPressed) {
    keysPressed[e.code as keyof typeof keysPressed] = false
  }
}

// 组件挂载和卸载
onMounted(() => {
  // 从localStorage获取最高分
  const savedHighScore = localStorage.getItem('planeWarHighScore')
  if (savedHighScore) {
    highScore.value = parseInt(savedHighScore)
  }
  
  // 确保游戏区域获取焦点
  focusGameArea()
})

onUnmounted(() => {
  stopGameLoop()
  
  // 保存最高分
  if (score.value > highScore.value) {
    localStorage.setItem('planeWarHighScore', score.value.toString())
  }
  
  // 清除可能存在的定时器
  if (startGameTimer) {
    clearTimeout(startGameTimer)
  }
})

// 事件发射
const emit = defineEmits(['close'])
</script>

<style scoped>
.plane-war-game {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-container {
  width: 500px;
  height: 750px;
  background: #1a1a2e;
  border: 3px solid #ffd700;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  overflow: hidden;
  position: relative;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #16213e;
  color: white;
}

.game-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.close-button {
  background: #ff4d4d;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight: bold;
}

.menu-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.menu-content h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.menu-stats {
  margin-bottom: 30px;
  font-size: 1.2rem;
}

.menu-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-controls button {
  padding: 12px 30px;
  font-size: 1.1rem;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: bold;
}

.start-button {
  background: linear-gradient(to right, #00b09b, #96c93d);
  color: white;
}

.instructions-button {
  background: linear-gradient(to right, #2193b0, #6dd5ed);
  color: white;
}

.menu-controls button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.instructions {
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  max-width: 80%;
}

.instructions h3 {
  color: #ffd700;
  margin-top: 0;
}

.instructions ul {
  text-align: left;
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 10px;
}

.back-button {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 15px;
}

.controls-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2001;
  color: white;
}

.controls-content {
  text-align: center;
  padding: 30px;
  background: #1a1a2e;
  border-radius: 15px;
  border: 2px solid #ffd700;
  max-width: 80%;
}

.controls-content h2 {
  color: #ffd700;
  margin-top: 0;
  font-size: 2rem;
}

.controls-instructions {
  margin: 25px 0;
  font-size: 1.2rem;
}

.controls-instructions p {
  margin: 15px 0;
}

.controls-instructions kbd {
  background: #333;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  font-family: monospace;
}

.controls-timer {
  font-size: 1.1rem;
  margin-top: 20px;
}

.controls-timer .timer {
  color: #f1c40f;
  font-weight: bold;
  font-size: 1.3rem;
}

.game-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.game-area {
  width: 480px;
  height: 700px;
  background: linear-gradient(180deg, #0c1445 0%, #1a1a2e 100%);
  position: relative;
  outline: none;
  overflow: hidden;
}

.player {
  position: absolute;
  width: 50px;
  height: 40px;
  z-index: 10;
}

.player-body {
  position: absolute;
  width: 30px;
  height: 30px;
  background: linear-gradient(45deg, #00eeff, #0066ff);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: 5px;
  left: 10px;
  box-shadow: 0 0 15px #00eeff;
}

.player-wing {
  position: absolute;
  width: 15px;
  height: 20px;
  background: linear-gradient(to right, #0066ff, #00eeff);
  top: 15px;
}

.left-wing {
  left: 0;
  border-radius: 50% 0 0 50%;
}

.right-wing {
  right: 0;
  border-radius: 0 50% 50% 0;
}

.player-cockpit {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ffcc00;
  border-radius: 50%;
  top: 15px;
  left: 20px;
  box-shadow: 0 0 8px #ffcc00;
}

.player.invincible {
  opacity: 0.5;
}

.enemy {
  position: absolute;
  width: 45px;
  height: 35px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.enemy-body {
  position: absolute;
  width: 45px;
  height: 35px;
  background: linear-gradient(45deg, #ff4d4d, #ff0000);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  box-shadow: 0 0 15px #ff4d4d;
}

.enemy-wing {
  position: absolute;
  width: 20px;
  height: 15px;
  background: linear-gradient(to right, #ff0000, #ff4d4d);
  bottom: 0;
  left: 12px;
  border-radius: 50% 50% 0 0;
}

.bullet-effect {
  position: absolute;
  top: 35px;
  width: 4px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0));
  animation: bullet-flicker 0.2s infinite alternate;
}

.enemy.normal {
  transform: rotate(180deg);
}

.enemy.boss {
  width: 100px;
  height: 80px;
}

.boss-body {
  position: absolute;
  width: 100px;
  height: 80px;
  background: linear-gradient(45deg, #e040fb, #aa00ff);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  box-shadow: 0 0 25px #e040fb;
}

.boss-eye {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #ffcc00;
  border-radius: 50%;
  top: 25px;
  box-shadow: 0 0 10px #ffcc00;
}

.left-eye {
  left: 25px;
}

.right-eye {
  right: 25px;
}

.boss-cannon {
  position: absolute;
  width: 20px;
  height: 30px;
  background: linear-gradient(to bottom, #333, #000);
  bottom: -15px;
  left: 40px;
  border-radius: 5px;
}

@keyframes bullet-flicker {
  from { opacity: 0.8; }
  to { opacity: 0.2; }
}

.bullet {
  position: absolute;
  width: 8px;
  height: 25px;
  background: #f1c40f;
  border-radius: 4px;
  z-index: 5;
}

.bullet.enemy {
  background: #ff4757;
  height: 30px;
}

.powerup {
  position: absolute;
  font-size: 25px;
  z-index: 5;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.explosion {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffff00, #ff9900, #ff0000);
  z-index: 4;
}

.game-info {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: #16213e;
  color: white;
  font-weight: bold;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.life {
  font-size: 1.2rem;
}

.boss-health {
  display: flex;
  align-items: center;
  gap: 10px;
}

.health-bar {
  width: 100px;
  height: 10px;
  background: #333;
  border-radius: 5px;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  background: linear-gradient(to right, #ff4757, #ff6b6b);
  transition: width 0.3s;
}

.pause-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.pause-content {
  background: #1a1a2e;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  color: white;
}

.pause-content h2 {
  margin-top: 0;
  color: #ffd700;
}

.pause-content button {
  background: #4d9de0;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.game-over-screen {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: white;
}

.game-over-content {
  text-align: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 15px;
}

.game-over-content h1 {
  color: #ff6b6b;
  margin-top: 0;
}

.new-record {
  color: #f1c40f;
  font-weight: bold;
  font-size: 1.2rem;
}

.game-over-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.game-over-buttons button {
  padding: 12px 25px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
}

.game-over-buttons button:first-child {
  background: linear-gradient(to right, #00b09b, #96c93d);
  color: white;
}

.game-over-buttons button:last-child {
  background: linear-gradient(to right, #2193b0, #6dd5ed);
  color: white;
}

.game-over-buttons button:hover {
  transform: scale(1.05);
}
</style>
